<template>
    <div>

      <el-form :inline="true" :model="seletMarket" class="demo-form-inline">
        <el-form-item label="股票代码">
          <el-input v-model="seletMarket.toCode" placeholder="股票代码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">
            查询
          </el-button>
        </el-form-item>

      </el-form>

      <el-button @click="saveMarket">添加</el-button>

      <el-table
      :data = "tableData"
      style="width: 100%">
        <el-table-column
        prop="tsCode"
        label="股票代码"
        width="180">
        </el-table-column>
        <el-table-column
        prop="tradeDate"
        label="交易时间"
        width="180">
        </el-table-column>
        <el-table-column
        prop="openPrice"
        label="开盘价">
        </el-table-column>
        <el-table-column
        prop="highPrice"
        label="最高价">
        </el-table-column>
        <el-table-column
        prop="lowPrice"
        label="最低价">
        </el-table-column>
        <el-table-column
        prop="closePrice"
        label="收盘价">
        </el-table-column>
        <el-table-column
        prop="volume"
        label="成交量">
        </el-table-column>
        <el-table-column
        prop="amount"
        label="成交量">
        </el-table-column>
        <el-table-column
        prop="changeRate"
        label="涨跌额">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
            size="mini"
            @click="updateMarket(scope.row)">
              编辑
            </el-button>
            <el-button
            size="mini"
            type="danger"
            @click="removeMarketById(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>

<!--   股票新增-->
      <el-dialog title="股票添加" :visible.sync="SaveFormVisible" width="600px" append-to-body>
        <el-form ref="form" :model="form" rules="rules" label-width="80px">

          <el-row>
            <el-col :span="12">
              <el-form-item label="股票代码" prop="tsCode">
                <el-input v-model="form.tsCode" placeholder="请输入股票代码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <span class="demonstration">交易日期</span>
              <el-date-picker
                  v-model="form.tradeDate"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="开盘价" prop="openPrice">
                <el-input v-model="form.openPrice" placeholder="请输入开盘价"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高价" prop="highPrice">
                <el-input v-model="form.highPrice" placeholder="请输入最高价"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="最低价" prop="lowPrice">
                <el-input v-model="form.lowPrice" placeholder="请输入最低价"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收盘价" prop="closePrice">
                <el-input v-model="form.closePrice" placeholder="请输入收盘价"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="成交量" prop="volume">
                <el-input v-model="form.volume" placeholder="请输入成交量"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="成交额" prop="amount">
                <el-input v-model="form.amount" placeholder="请输入成交额"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="涨跌幅" prop="changeRate">
                <el-input v-model="form.changeRate" placeholder="请输入涨跌幅"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="UpdateFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="SaveSure">确 定</el-button>
        </div>

      </el-dialog>


<!--      股票修改-->
      <el-dialog title="股票修改" :visible.sync="UpdateFormVisible" width="600px" append-to-body>
          <el-form ref="form" :model="form" rules="rules" label-width="80px">
            <el-row>
              <el-col span="12">
                <el-form-item label="股票代码" prop="tsCode">
                  <el-input v-model="form.tsCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <span class="demonstration">交易日期</span>
                <el-date-picker
                    v-model="form.tradeDate"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开盘价" prop="openPrice">
                  <el-input v-model="form.openPrice"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最高价" prop="highPrice">
                  <el-input v-model="form.highPrice"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="最低价" prop="lowPrice">
                  <el-input v-model="form.lowPrice"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收盘价" prop="closePrice">
                  <el-input v-model="form.closePrice"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="成交量" prop="volume">
                  <el-input v-model="form.volume"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="成交额" prop="amount">
                  <el-input v-model="form.amount"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="涨跌幅" prop="changeRate">
                  <el-input v-model="form.changeRate"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="SaveFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="UpdateSure">确 定</el-button>
          </div>
      </el-dialog>

    </div>
</template>

<script>
export default {
  name: "MarketView",
  data(){
    return{
      tableData:[],
      seletMarket:{
        current:1,
        size:10,
        total:0
      },
      form:{
        id:null,
        tsCode:null,
        tradeDate:null,
        openPrice:null,
        highPrice:null,
        lowPrice:null,
        closePrice:null,
        volume:null,
        amount:null,
        changeRate:null
      },
      SaveFormVisible:false,
      UpdateFormVisible:false
    }
  },
  methods:{
    SaveSure(){
        this.axios.post("https://localhost:8005/market/saveMarket",this.form).then(resp=>{
          this.SaveFormVisible=false
          this.getlistMerket()
        })
    },
    UpdateSure(){
      console.log(this.form);
      this.axios.post("https://localhost:8005/market/updateMarket",this.form).then(resp=>{
          this.UpdateFormVisible=false
          this.getlistMerket();
        })
    },
    //添加方法
    saveMarket(){
      this.SaveFormVisible=true
    },
    //查询方法
    onSubmit(){
      this.getlistMerket()
    },
    //股票删除方法
    removeMarketById(row){
      this.axios.post("https://localhost:8005/market/removeMarketById?id="+row.id).then(resp=>{
        this.getlistMerket()
      })
    },
    // 股票修改回显方法
    updateMarket(row){
      this.axios.post("https://localhost:8005/market/selectMarket?id="+row.id).then(resp=>{
        this.form = {
          id:row.id,
          tsCode: row.tsCode,
          tradeDate: row.tradeDate,
          openPrice: row.openPrice,
          highPrice: row.highPrice,
          lowPrice: row.lowPrice,
          closePrice: row.closePrice,
          volume: row.volume,
          amount: row.amount,
          changeRate: row.changeRate

        }
      })
      this.UpdateFormVisible=true
    },
      getlistMerket(){
        this.axios.post("https://localhost:8005/market/listMarket?current="+this.current+"&size="+this.size,this.seletMarket).then(resp=>{
          console.log(resp)
          this.tableData = resp.data.data.records
        })
      }
  },
  created() {
    this.getlistMerket()
  }
}
</script>

<style scoped>

</style>